<template>
  <div style="width:230px;height:194px;">
    <div style="width: 100%;
    position: relative;">
      <div style="width: 100%;
color: #fff;
overflow: hidden;">
        <div style="width: 2px;
  height: 25%;
  background-color: #00704E;
  position: absolute;"></div>
        <div style="position: absolute;
  left: 10px;
  font-size: 14px;">场馆保电变电站数量及列表</div>
        <div
          style="margin-top: 22px;
  margin-left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 30px;"
        >
          <img src="../assets/8.png" style="width: 30px;
    margin-right: 18px;" />
          <div>1539</div>
        </div>
      </div>
      <div class="content" style="font-size: 12px;
  margin-top: 0px;">
        <div
          class="top-title"
          style="display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-bottom: 6px;"
        >
          <div
            class="name"
            style="flex: 2.6;
    margin-right: 8px;
    border-bottom: 2px solid #00704E;
    color: #00704E;
    padding-bottom: 6px;"
          ><div style="transform:scale(0.83);">电站名称</div></div>
          <div
            class="level"
            style="flex: 1;
    color: #fff;
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 2px solid #00CC84;"
          ><div style="transform:scale(0.83);">电压等级</div></div>
        </div>
        <div
          class="item"
          v-for="item in datalist"
          :key="item.id"
          style="display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-bottom: 5px;"
        >
          <div
            class="name"
            style="flex: 2.6;
    margin-right: 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.308);
    color: #00704E;
    padding-bottom: 5px;"
          ><div style="transform:scale(0.83);transform-origin:left;">{{item.name}}</div></div>
          <div
            class="level"
            style="flex: 1;
    color: #fff;
    margin: 0;
    padding-bottom: 5px;
    border-bottom:  1px solid rgba(255, 255, 255, 0.308);"
          ><div style="transform:scale(0.83);">{{item.level}}</div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      datalist: [
        {
          name: "安慧站",
          level: "AC110KV"
        },
        {
          name: "奥运村站",
          level: "AC110KV"
        },
        {
          name: "城北500KV站",
          level: "AC220KV"
        },
        {
          name: "CVS0103国家体育场北刀闸室",
          level: "AC10KV"
        }
      ]
    };
  }
};
</script>
<style>
/*
.wrap {
width: 100%;
position: relative;
}
.top {
width: 100%;
color: #fff;
overflow: hidden;
}
.left-bar{
  width: 2px;
  height: 30%;
  background-color: #00704E;
  position: absolute;
}
.title{
  position: absolute;
  left: 10px;
  font-size: 14px;
}
.title-data{
  margin-top: 22px;
  margin-left: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 36px;
}

.icon{
    width: 40px;
    height: 40px;
    margin-right: 18px;
}
.content{
  font-size: 12px;
  margin-top: 16px;
}
.content > div{
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding-bottom: 12px;
}
.content .name{
    flex: 2.6;
    margin-right: 8px;
    border-bottom: 2px solid #00704E;
    color: #00704E;
    padding-bottom: 6px;
}

.level{
    flex: 1;
    color: #fff;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 2px solid #00CC84;
}
.item .name{
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.308);
}
.item .level{
    border-bottom: 1px solid rgba(255, 255, 255, 0.308);
}
*/
</style>